<template>
  <div class="container">
    <van-loading v-if="!loading" class="loading" type="spinner" color="#1989fa" size="50" />

    <van-sticky>
      <!-- 搜索框 -->
      <SearchBar
        v-show="loading"
        :Keyword="Keyword"
        :currentPosition="currentPosition"
        @click="gotoPTransferSearch"
      />
    </van-sticky>

    <div class="menu">
      <div class="tips">转票服务由第三方平台塔釜供应链提供</div>
      <div class="button-group">
        <div class="button"><van-icon :name="myTransfer" size="22" /> 我的转票</div>
        <div class="button" @click="gotoPTransferSearch">
          <van-icon :name="toTransfer" size="22" /> 我要转票
        </div>
      </div>
    </div>

    <div class="transfers">
      <div class="transfer-title">近期转票</div>
      <van-list
        v-model:loading="listLoading"
        :finished="listFinished"
        finished-text="没有更多了"
        :immediateCheck="false"
        @load="onLoad"
      >
        <ul class="transfer-list">
          <template v-for="transfer in transfers" :key="transfer.showOID">
            <li class="transfer-item" @click="goToTransferDetail(transfer)">
              <div class="left">
                <div class="cover">
                  <img :src="transfer.posterURL" class="thumb" />
                </div>
              </div>
              <div class="right">
                <div class="title">{{ transfer.showName }}</div>
                <div class="date-venue">
                  <div class="ShowTime">
                    {{ formatShowTime(transfer.firstShowTime, transfer.lastShowTime) }}
                  </div>
                  <div class="venue">{{ transfer.venueName }}</div>
                </div>
                <div class="transfer-button">
                  <van-button type="primary" round size="small" color="#FF1D41"
                    >我要转票</van-button
                  >
                </div>
              </div>
            </li>
          </template>
        </ul>
      </van-list>
    </div>

    <!-- 底部导航 -->
    <tab-bar />
  </div>
</template>

<script setup>
import TabBar from '@/component/common/TabBar.vue'
import { fetchTourSiteTicketTransfer } from '@/api/index.js'

import toTransfer from '@/asset/images/to-transfer.png'
import myTransfer from '@/asset/images/my-transfer.png'

import SearchBar from '@/component/common/SearchBar.vue'
import { ref, computed, watch } from 'vue'
import { useStore } from '@/stores/index.js'
const store = useStore()

import { useRouter } from 'vue-router'
const router = useRouter()

const listLoading = ref(false)
const listFinished = ref(false)

const transfers = ref([])

//当前定位 或者手动设定的城市名字
const currentPosition = computed(() => store.currentCity.cityName)
const siteCityOID = computed(() => store.locationCity.siteCityOID)

const loading = ref(true)

const Keyword = ref('请搜索演出进行卖票')

const length = ref(10)
const pageNum = ref(1)
const offset = computed(() => (pageNum.value - 1) * length.value)

const isFinshed = ref(false)

// onMounted(() => {
//   getTourSiteTicketTransfer(store.currentCity.siteCityOID, 10, 0)
// })

const gotoPTransferSearch = () => {
  router.push({ path: '/search_transfer' })
}

// 格式化时间
const formatShowTime = (firstShowTime, lastShowTime) => {
  if (firstShowTime === lastShowTime) {
    return firstShowTime
  }
  return firstShowTime + '~' + lastShowTime
}

const getTourSiteTicketTransfer = async (siteCityOID, length, offset) => {
  listLoading.value = true
  try {
    const {
      statusCode,
      result: { data },
    } = await fetchTourSiteTicketTransfer(siteCityOID, length, offset)
    if (statusCode === 200 && data && data.length > 0) {
      if (pageNum.value === 1) {
        transfers.value = data
      } else {
        transfers.value.push(...data)
      }
    } else {
      // 没数据了
      isFinshed.value = true
    }
  } catch (error) {
    console.log('获取近期转票失败', error)
  } finally {
    console.log('transfers', transfers.value)
    listLoading.value = false
  }
}

watch(
  siteCityOID,
  async (newSiteCityOID) => {
    if (newSiteCityOID) {
      pageNum.value = 1

      await getTourSiteTicketTransfer(newSiteCityOID, length.value, offset.value)
    }
  },
  {
    immediate: true,
  },
)

watch(pageNum, async (newPageNum) => {
  if (newPageNum > 1) {
    await getTourSiteTicketTransfer(
      siteCityOID.value,
      length.value,
      (newPageNum - 1) * length.value,
    )
  }
})

const onLoad = () => {
  //首先判断是否还有更多数据
  if (isFinshed.value || transfers.value.length < length.value) {
    listLoading.value = false
    listFinished.value = true
    return
  } else {
    // 还有跟多数据
    pageNum.value++
  }
}

const goToTransferDetail = (transfer) => {
  store.setTransferTicket(transfer.showOID, transfer.showName, transfer.posterURL)
  router.push({ path: '/transfer-detail', query: { showId: transfer.showOID } })
}
</script>

<style scoped lang="scss">
.container {
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }

  .menu {
    padding: 10px 15px;

    .tips {
      color: #95949d;
      font-size: 12px;
      text-align: center;
      padding: 0 15px 15px;
    }

    .button-group {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      text-align: center;

      .button {
        border: 1px solid rgba(0, 0, 0, 0.2);
        padding: 20px;
        font-weight: 400;
        color: #4f4f4f;
        font-size: 14px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 8px 6px 5px 2px rgba(0, 0, 0, 0.04);
      }
    }
  }

  .transfers {
    padding: 0 15px;
    margin-top: 20px;

    .transfer-title {
      color: #4f4f4f;
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 10px;
    }

    .van-list {
      margin-bottom: 50px;

      .transfer-list {
        list-style: none;
        display: flex;
        flex-direction: column;

        .transfer-item {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 10px;
          padding: 10px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.04);

          .left {
            .cover {
              width: 100px;
              height: 130px;
              overflow: hidden;
              border-radius: 4px;

              .thumb {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }

          .right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 130px;
            justify-content: space-between;

            .title {
              font-size: 17px;
              font-weight: 500;
              //文字最多显示两行
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
            }

            .date-venue {
              .ShowTime {
                color: #737373;
                font-size: 12px;
                font-weight: 400;
              }

              .venue {
                color: #737373;
                font-size: 12px;
                font-weight: 400;
              }
            }

            .transfer-button {
              margin: 0 0 0 auto;

              .van-button {
                margin: 0 0 0 auto;
              }
            }
          }
        }
      }
    }
  }
}
</style>
